{% extends "base.html" %}
{% block content %}
<div class="container py-5">
  <h3 class="mb-4">My Quiz History</h3>

  {% if attempts %}
    <div class="table-responsive">
      <table class="table table-bordered align-middle text-center">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Quiz Title</th>
            <th>Score</th>
            <th>Max Score</th>
            <th>Percentage</th>
            <th>Started</th>
            <th>Finished</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {% for attempt in attempts %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ attempt.quiz.title }}</td>
              <td>{{ attempt.score }}</td>
              <td>{{ attempt.max_score }}</td>
              <td>
                {% if attempt.max_score %}
                  {{ attempt.score|divisibleby:attempt.max_score|floatformat:2 }}%
                {% else %}
                  N/A
                {% endif %}
              </td>
              <td>{{ attempt.started_at|date:"M d, Y H:i" }}</td>
              <td>
                {% if attempt.finished_at %}
                  {{ attempt.finished_at|date:"M d, Y H:i" }}
                {% else %}
                  <span class="text-muted">In Progress</span>
                {% endif %}
              </td>
              <td>
                {% if attempt.finished_at %}
                  <span class="badge bg-success">Completed</span>
                {% else %}
                  <span class="badge bg-warning text-dark">Ongoing</span>
                {% endif %}
              </td>
              <td>
                {% if attempt.finished_at %}
                  <!-- 🔹 The "View Details" button -->
                  <a href="{% url 'quizzes:attempt_detail' attempt.id %}" class="btn btn-sm btn-primary">
                    View Details
                  </a>
                {% else %}
                  <span class="text-muted">--</span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <div class="alert alert-info">
      You haven’t attempted any quizzes yet.
    </div>
  {% endif %}
</div>
{% endblock %}